<template>
	<view class="content" style="background-color: #FFFFFF;">
		<view class="help_view">
			<view class="help_item" v-for="(item,index) in helpList" :key="item.id" @tap="detail(item.id)">
				{{index+1}}. {{item.title}}
			</view>
		</view>
		<view class="mask" @tap="hidden()" v-show="visiable" catchtouchmove="false"></view>
		<view :class="[!visiable?'help_content':'help_content_']" catchtouchmove="false">
			<scroll-view scroll-y>
				<view class="content_item" v-for="(item,index) in contentList" :key="item.id">
					{{index+1}}. {{item.content}}
				</view>
			</scroll-view>
			<view class="del" @tap="hidden()">
				<uni-icon type="closeempty" color="#888888" size="40"></uni-icon>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import api from "../../common/api.js";
	import {get_,getWithParam_} from "../../common/request.js"
	export default{
		components: {
			uniIcon
		},
		data(){
			return{
				visiable:false,
				helpList:[],
				contentList:[]
			}
		},
		onLoad() {
			this.initData()
		},
		methods:{
			initData(){
				get_(api.HELP_LIST).then(res=>{
					this.helpList =res.data
				})
			},
			hidden(){
				this.visiable=false
			},
			detail(id){
				getWithParam_(api.HELP_COUTENT,{id}).then(res=>{
					this.contentList=res.data
					this.visiable=true
				})
			}
		}
	}
</script>

<style>
	scroll-view{
		height: 100%;
		width: 100%;
	}
	.content_item{
		border-bottom: 3upx solid #F2F3F5;
		height: 80upx;
		align-items: center;
		color: #333333;
		width: 100%;
	}
	.help_item{
		border-bottom: 3upx solid #F2F3F5;
		height: 80upx;
		align-items: center;
		color: #333333;
	}
	.help_item:active{
		background-color: #F2F3F5;
	}
	.help_view{
		background-color: #FFFFFF;
		flex-direction: column;
		padding: 30upx;
		box-sizing: border-box;
		width: 100%;
	}
	.help_content{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 800upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		padding-top: 70upx;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 200;
	}
	.help_content_{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 800upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		padding-top: 70upx;
		transition: all 0.3s ease;
		transform: translateY(0);
		z-index: 200;
	}
	.del{
		position: absolute;
		top: 0;
		right: 10upx;
	}
</style>
